<template>
  <q-dialog v-model="visible">
    <q-card style="min-width: 22rem" class="q-pa-sm">
      <q-card-section class="q-pa-sm">
        <q-file outlined v-model="excel" label="点击此处上传Excel" accept=".xls,.xlsx">
          <template v-slot:before>
            <div class="text-h6">文件上传</div>
          </template>
          <template v-slot:append>
            <q-icon v-if="excel !== null" name="close" @click="clear" class="cursor-pointer" />
            <q-icon name="create_new_folder" @click.stop />
          </template>
        </q-file>
      </q-card-section>
      <q-slide-transition>
        <div v-if="excel!== null">
          <q-separator class="q-ma-sm"/>
          <q-card-section class="q-pa-sm">
            <q-table
              class="sticky-header-table"
              :rows="excelList"
              :columns="columns"
              selection="multiple"
              v-model:selected="selected"
              hide-bottom
              virtual-scroll
              :rows-per-page-options="[0]"
              style="max-height: calc(70vh - 80px);"
              row-key="contentName">
            </q-table>
          </q-card-section>
          <q-card-section class="row q-pa-sm justify-end q-gutter-x-md">
            <transition-flip>
              <q-btn v-show="selected.length !== 0" color="primary" outline @click="uploadDetail(selected)">
                录入选中的{{selected.length}}项数据
              </q-btn>
            </transition-flip>
            <q-btn color="primary" @click="uploadDetail(excelList)" label="全部录入"/>
          </q-card-section>
        </div>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>

<script>
import { ref, watch } from 'vue'
import { api } from 'boot/axios'
import { useQuasar } from 'quasar'
import { useAPIStore } from 'stores/api'
import { read, utils } from 'xlsx'

import TransitionFlip from 'components/animations/Flip.vue'

const columns = [
  { name: 'contentName', label: '物料名称', align: 'left', field: 'contentName' },
  { name: 'contentCount', label: '物料数量', align: 'left', field: 'contentCount' },
  { name: 'mapPoseID', label: '目的地', align: 'left', field: 'mapPoseID' },
  { name: 'boxNum', label: '货舱', align: 'left', field: 'boxNum' }
]

export default {
  name: 'OrderDetailUploader',
  components: { TransitionFlip },
  setup (props, context) {
    const $q = useQuasar()
    const orderUrl = useAPIStore().orderUrl
    const visible = ref(false)

    const orderID = ref('')
    const excel = ref(null) // 上传的文件对象
    const excelList = ref([]) // 上传的文件内容
    const selected = ref([]) // 选中的行

    watch(excel, value => { // 监听上传文件，当有文件时，渲染表格
      if (value) {
        const reader = new FileReader()
        reader.onload = function (e) {
          const data = e.target.result
          const workbook = read(data, { type: 'binary' })
          const table = workbook.Sheets[workbook.SheetNames[0]]
          excelList.value = utils.sheet_to_json(table)
        }
        reader.readAsBinaryString(value)
      }
    })
    function clear () {
      excel.value = null
      excelList.value = []
      selected.value = []
    }
    function uploadDetail (data) {
      api.post(orderUrl + '/detail/list/' + orderID.value, data).then(rs => {
        if (rs.status === 200) {
          $q.dialog({
            title: '配送物料列表录入成功',
            message: '请手动补充配送目的地和使用的货舱',
            persistent: true
          })
          context.emit('load', rs.data)
          visible.value = false
          clear()
        } else {
          $q.notify({ type: 'negative', message: '订单明细录入出错' })
          console.log(rs.data)
        }
      })
    }
    return {
      columns,
      visible,
      excel,
      excelList,
      selected,
      show: function (data) {
        orderID.value = data
        visible.value = true
      },
      clear,
      uploadDetail
    }
  }
}
</script>
